<template>
  <s-popup v-model="show" position="bottom" round :mask="true" mask-close>
    <view class="staff-selector">
      <view class="header">
        <text class="title">选择员工</text>
        <view class="actions">
          <text class="action-text" @click="cancel">取消</text>
          <text class="action-text confirm" @click="confirm">确定</text>
        </view>
      </view>

      <view class="search-box">
        <input class="search-input" placeholder="搜索员工姓名" v-model="searchText" @input="filterStaff" />
        <s-icon name="search" size="18" color="#999" class="search-icon" />
      </view>

      <scroll-view class="staff-list" scroll-y>
        <view class="staff-item" v-for="staff in filteredStaff" :key="staff.id" @click="toggleSelect(staff)">
          <view class="staff-info">
            <image class="avatar"
              :src="staff.avatar || 'http://ziyuanstatic.oss-cn-beijing.aliyuncs.com/static/images/default-avatar.png'"
              mode="aspectFill" />
            <view class="info">
              <text class="name">{{ staff.real_name }}</text>
              <text class="position">{{ staff.position || '无职位' }}</text>
            </view>
          </view>
          <s-icon :name="isSelected(staff.id) ? 'checked' : 'plus'" size="20"
            :color="isSelected(staff.id) ? '#07C160' : '#f1f1f1'" />
        </view>

        <view class="empty-tips" v-if="filteredStaff.length === 0">
          <s-icon name="box" size="40" color="#ccc" />
          <text class="empty-text">暂无员工数据</text>
        </view>
      </scroll-view>
    </view>
  </s-popup>
</template>
  
<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    staffList: {
      type: Array,
      default: () => []
    },
    selectedStaff: {
      type: Array,
      default: () => []
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      show: this.value,
      searchText: '',
      tempSelected: [],
      filteredStaff: []
    }
  },
  watch: {
    value(val) {
      this.show = val
      if (val) {
        this.tempSelected = [...this.selectedStaff]
        this.filterStaff()
      }
    },
    show(val) {
      this.$emit('input', val)
    },
    staffList: {
      immediate: true,
      handler() {
        this.filterStaff()
      }
    }
  },
  methods: {
    filterStaff() {
      if (!this.searchText) {
        this.filteredStaff = [...this.staffList]
        return
      }
      const keyword = this.searchText.toLowerCase()
      this.filteredStaff = this.staffList.filter(staff =>
        staff.real_name.toLowerCase().includes(keyword) ||
        (staff.position && staff.position.toLowerCase().includes(keyword))
      )
    },
    toggleSelect(staff) {
      if (this.multiple) {
        const index = this.tempSelected.findIndex(item => item.id === staff.id)
        if (index >= 0) {
          this.tempSelected.splice(index, 1)
        } else {
          this.tempSelected.push(staff)
        }
      } else {
        this.tempSelected = [staff]
      }
    },
    isSelected(id) {
      return this.tempSelected.some(staff => staff.id === id)
    },
    cancel() {
      this.show = false
    },
    confirm() {
      this.$emit('update:selectedStaff', [...this.tempSelected])
      this.$emit('confirm', [...this.tempSelected])
      this.show = false
    }
  }
}
</script>
  
<style lang="scss" scoped>
.staff-selector {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;

  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .actions {
    display: flex;
    align-items: center;

    .action-text {
      font-size: 28rpx;
      color: #666;
      padding: 10rpx 20rpx;

      &.confirm {
        color: #07C160;
      }
    }
  }
}

.search-box {
  position: relative;
  padding: 20rpx 30rpx;

  .search-input {
    width: 100%;
    height: 70rpx;
    background-color: #f5f5f5;
    border-radius: 35rpx;
    padding: 0 70rpx 0 30rpx;
    font-size: 28rpx;
    color: #333;
  }

  .search-icon {
    position: absolute;
    right: 50rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}

.staff-list {
  flex: 1;
  padding: 0 30rpx;
  box-sizing: border-box;
}

.staff-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  .staff-info {
    display: flex;
    align-items: center;

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .info {
      display: flex;
      flex-direction: column;

      .name {
        font-size: 30rpx;
        color: #333;
      }

      .position {
        font-size: 26rpx;
        color: #999;
        margin-top: 8rpx;
      }
    }
  }
}

.empty-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
  color: #999;

  .empty-text {
    margin-top: 20rpx;
    font-size: 28rpx;
  }
}
</style>